<template>
	<div class="swiper-container" ref="myswiper">
		<div class="swiper-wrapper">
			<slot></slot>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-pagination"></div>
	</div>
</template>


<script>
	// 导入Swiper
	import Swiper from "../assets/swiper2/swiper.min.js"
	// 导入css
	import "../assets/swiper2/swiper.min.css"
	export default {
		// 组件渲染完毕后导入
		mounted() {
			// 初始化swiper
			var swiper = new Swiper(this.$refs.myswiper, {
				keyboard: true,
				loop:true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				},
			});
		}
	}
</script>

<style>
	:root {
	    --swiper-theme-color: #f70;
	}
	.swiper-container {
		width: 100%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}
    .swiper-pagination-bullet {
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 100%;

}
	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
</style>
